<template>
	<div id="app">
		<img alt="Vue logo" src="./assets/logo.png" />
		<!-- 使用过滤器对名字进行过滤 -->
		<h1 :id="id | format">{{ name | capitalize }}</h1>
		<input type="text" v-model="name" />
		<button @click="handleDestory">销毁App 组件</button>
		<!-- 演示其它的三个组件 -->
		<keep-alive>
			<component :is="componentId"></component>
		</keep-alive>
		<button @click="componentId = 'HelloWorld'">切换动态组件</button>
		<!-- <LifeCycle></LifeCycle> -->
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import LifeCycle from '@/components/LifeCycle.vue'
export default {
	name: 'App',
	errorCaptured: function (error, vm, info) {
		console.log(error, vm, info)
		return false //阻止里面错误向上传播
		// return true
	},
	/* 8个常见的生命周 */
	beforeCreate() {
		console.log('App 组件 beforeCreate 执行了')
		console.log('事件：', this.handleClick) // => this App 组件
		console.log('数据：', this.name) // 名字
		console.log('元素：', this.$el) // 元素
	},
	created() {
		console.log('App 组件 created 执行了')
		console.log('事件：', this.handleClick) // => this App 组件
		console.log('数据：', this.name) // 名字
		console.log('元素：', this.$el) // 元素
		// 发送请求，获取数据，原生接口 fetch("url") 可以用来获取网络请求数据
		fetch('https://v2.alapi.cn/api/joke')
	},
	beforeMount() {
		console.log('App 组件 beforeMount 执行了')
		console.log('事件：', this.handleClick) // => this App 组件
		console.log('数据：', this.name) // 名字
		console.log('元素：', this.$el) // 元素
	},
	mounted() {
		// 组件已经挂载到DOM树上，所以这个时候，我们就可以对界面上的节点进行操作了
		console.log('App 组件 mounted 执行了')
		console.log('事件：', this.handleClick) // => this App 组件
		console.log('数据：', this.name) // 名字
		console.log('元素：', this.$el) // 元素
	},
	beforeUpdate() {
		console.log('App 组件更新前')
	},
	updated() {
		console.log('App 组件更新好了')
	},
	beforeDestroy() {
		console.log('App 组件销毁前')
	},
	destroyed() {
		console.log('App 组件销毁了')
	},
	methods: {
		handleDestory: function () {
			this.$destroy()
		},
		handleClick: function () {},
	},
	data: function () {
		return {
			componentId: 'LifeCycle',
			name: 'thomas',
			id: 123,
		}
	},
	filters: {
		format: function (id) {
			// id:123 形式
			return 'id:' + id
		},
	},
	/* 局部过滤器 */
	// filters: {
	// 	capitalize: function (value) {
	// 		// return 123
	// 		// 先做判断，如果值为空，返回一个空的值就可以了
	// 		if (!value) return ''
	// 		value = value.toString()
	// 		return value[0].toUpperCase() + value.slice(1)
	// 	},
	// },
	components: {
		HelloWorld,
		LifeCycle,
	},
}
</script>

<style>
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
}
</style>
